<template>
    <div>
        <div class="tree-folder" v-for="permission in permissions">
            <div class="tree-folder-header">
                <i v-bind:id="permission.id" v-bind:class="is_checked(permission.id)"></i>
                <div class="tree-folder-name">{{ permission.title }}</div>
            </div>

            <div class="tree-folder-content" v-if="permission.children">
                <give-permission-tree :permissions="permission.children" :myPermissions="myPermissions"></give-permission-tree>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['permissions', 'myPermissions'],
        methods: {
            is_checked(permission){
                return ($.inArray(permission, this.myPermissions) >= 0) ? 'fa fa-check-square-o' : 'fa fa-square-o';
            }
        }
    }
</script>